<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>商品详情</title>
    <link rel="stylesheet" href="../../static/styles/init.css">
    <link rel="stylesheet" href="../../styles/details.css">
</head>

<body>
    <div class="wrapper">
        <!-- 头部 -->
        <div class="top">
            <h1 class="logo">
                <a href="#" title="锤子商城"></a>
            </h1>
            <div class="container">
                <ul class="top_nav">
                    <li> <a href="" title=" 在线商城 " class="active" style="font-weight: 700">在线商城</a> </li>
                    <li> <a href="" title=" 坚果 Pro 2S ">坚果 Pro 2S</a> </li>
                    <li> <a href="" title=" 坚果 R1 ">坚果 R1</a> </li>
                    <li> <a href="" title=" 坚果 TNT 工作站 ">坚果 TNT 工作站</a> </li>
                    <li> <a href="" title="  Smartisan OS  ">Smartisan OS</a> </li>
                    <li> <a href="" title="  欢喜云  ">欢喜云</a> </li>
                    <li> <a href="" title=" 应用 ">应用</a> </li>
                    <li> <a href="" title="  论坛  ">论坛</a> </li>
                    <li> <a href="" title=" 荣誉与奖项 ">荣誉与奖项</a> </li>
                </ul>
            </div>
            <ul class="top_aside">
                <li class="top_user">
                    <a href="../login/login.html"></a>
                    <div class="nav_user_wrapper">
                        <div class="nav_user_list">
                            <div class="userwrapper">
                                <span></span>
                            </div>
                            <div class="user">17811111</div>
                            <ul class="list">
                                <li><a href=""><span class="a"></span>我的订单</a></li>
                                <!-- <li><a href=""><span class="b"></span>售后服务</a></li> -->
                                <li><a href=""><span class="c"></span>我的优惠</a></li>
                                <li><a href=""><span class="d"></span>账户资料</a></li>
                                <li><a href=""><span class="e"></span>收货地址</a></li>
                                <li class="logout"><a><span class="f"></span>退出</a></li>
                            </ul>
                        </div>
                    </div>
                </li>
                <li class="top_cart">
                    <a href=""></a>
                    <div class="cart_wrapper">
                        <div class="cart_list">
                            <div class="empty">
                                <h3>购物车为空</h3>
                                <p>您还没有选购任何商品，现在前往商城选购吧！</p>
                            </div>
                        </div>
                    </div>
                    <div class="info_wrapper">
                        <div class="box_inner">
                            <!-- <div class="cart_group">
                                    <div class="items-thumb">
                                        <img src="https://resource.smartisan.com/resource/6e96ccea3bd56bdd2243eb20330cec30.jpg?x-oss-process=image/resize,w_80"
                                            alt="">
                                    </div>
                                    <div class="cart_info">
                                        <div class="name">
                                            坚果砖式蓝牙小音箱
                                        </div>
                                        <div class="price">
                                            <span>¥149.00<i>&nbsp;×&nbsp;1</i></span>
                                        </div>
                                    </div>
                                </div> -->
                        </div>
                        <div class="cart_bottom">
                            <div class="b_l">
                                <div class="shipping-num">
                                    <h4>已选择 <i>0</i> 件商品</h4>
                                </div>
                                <div class="shipping-price">
                                    <h4>应付总额：<span>￥0</span></h4>
                                </div>
                            </div>
                            <span class="jieguo">
                                去购物车
                            </span>
                        </div>
                    </div>
                </li>
            </ul>
        </div>
        <!-- 导航栏 -->
        <div class="nav">
            <div class="nav_wrapper">
                <div class="nav_container">
                    <ul class="nav_list">
                        <li><a href="" style="font-weight: 700">首页</a></li>
                        <li><a href="">手机</a></li>
                        <li><a href="">官方配件</a></li>
                        <li><a href="">服饰箱包</a></li>
                        <li><a href="">畅呼吸</a></li>
                        <li><a href="">服务</a></li>
                    </ul>
                    <div class="search_bar">
                        <form action="" class="search_form">
                            <input type="text" class="search_box" maxlength="30" name="searchText" placeholder="">
                            <button class="search_btn" type="submit"></button>
                            <div class="search_recommend_words">
                                <a href="">T恤</a>
                            </div>
                        </form>
                        <div class="keywords_list">
                            <div class="arrow_up">
                                <span></span>
                            </div>
                            <ul class="result_list">
                                <li><span>T恤</span></li>
                                <li><span>移动电源</span></li>
                                <li><span>卫衣</span></li>
                                <li><span>帆布鞋</span></li>
                                <li><span>保护套</span></li>
                            </ul>
                        </div>
                    </div>
                </div>
            </div>
            <div class="nav_goods_panel">
                <ul class="nav_category_list">

                </ul>
            </div>
        </div>
        <!-- 主体 -->
        <!-- <div class="item_wrapper">
            <div class="gray_box">
                <div class="gallery_wrapper">
                    <div class="gallery">
                        <figure class="thumbnail">
                            <ul>
                                <li><img src="https://resource.smartisan.com/resource/22c95761b040112ee4ff6e4653691ae6.png?x-oss-process=image/resize,w_80/format,webp"
                                        alt=""
                                        data-src="https://resource.smartisan.com/resource/22c95761b040112ee4ff6e4653691ae6.png?x-oss-process=image/resize,w_527/format,webp">
                                </li>
                                <li><img src="https://resource.smartisan.com/resource/1cc08c4ac4eea189a4b3a6078e842f9e.png?x-oss-process=image/resize,w_80/format,webp"
                                        alt=""
                                        data-src="https://resource.smartisan.com/resource/1cc08c4ac4eea189a4b3a6078e842f9e.png?x-oss-process=image/resize,w_527/format,webp">
                                </li>
                                <li><img src="https://resource.smartisan.com/resource/2bbaad7e726fff214bc72f2cf1029f44.png?x-oss-process=image/resize,w_80/format,webp"
                                        alt=""
                                        data-src="https://resource.smartisan.com/resource/2bbaad7e726fff214bc72f2cf1029f44.png?x-oss-process=image/resize,w_527/format,webp">
                                </li>
                                <li><img src="https://resource.smartisan.com/resource/9b8e72ee8dd2e24e3116016af704747e.png?x-oss-process=image/resize,w_80/format,webp  "
                                        alt=""
                                        data-src="https://resource.smartisan.com/resource/9b8e72ee8dd2e24e3116016af704747e.png?x-oss-process=image/resize,w_527/format,webp">
                                </li>
                                <li><img src="https://resource.smartisan.com/resource/77031389dd6712d55a55b8d0aa2f9196.png?x-oss-process=image/resize,w_80/format,webp"
                                        alt=""
                                        data-src="https://resource.smartisan.com/resource/77031389dd6712d55a55b8d0aa2f9196.png?x-oss-process=image/resize,w_527/format,webp">
                                </li>
                            </ul>
                        </figure>
                        <figure class="thumb">
                            <ul>
                                <li><img src="https://resource.smartisan.com/resource/22c95761b040112ee4ff6e4653691ae6.png?x-oss-process=image/resize,w_527/format,webp"
                                        alt=""></li>
                            </ul>
                        </figure>
                    </div>
                </div>
                <div class="item_information">
                    <article class="item_title">
                        <h1>Smartisan T恤 薛定谔</h1>
                        <h2></h2>
                        <div class="item_price">
                            <span>
                                <em>¥</em> <i>74.50</i>
                            </span>
                            <span class="original_price"> 原价： <em>¥149.00</em>
                            </span>
                        </div>
                    </article>
                    <section class="activities_wrapper">
                        <div class="activities">
                            <span class="activities_title">促销活动 </span>
                            <div class="activities_list">
                                <article class="activities_item">
                                    <figure class="tag_wrapper">
                                        <span class="tag_yellow"> 鞋服优惠 </span>
                                    </figure>
                                    <label for="">9月19日鞋服清仓优惠 </label>
                                </article>
                            </div>
                        </div>
                    </section>
                    <section class="item_spec_package">
                        <div class="item_spec">
                            <span class="spec_title">款式选择</span>
                            <ul class="spec_info">
                                <li class="active">
                                    <aside class="specs_item">
                                        <h1 class="item_name">男款</h1>
                                    </aside>
                                </li>
                            </ul>
                        </div>
                    </section>
                    <section class="item_spec_color">
                        <div class="item_spec">
                            <span class="spec_title">颜色选择</span>
                            <ul class="spec_info">
                                <li>
                                    <aside>
                                        <span class="color_box">
                                            <i class="color_item">
                                                <img src="https://resource.smartisan.com/resource/85c73076d653ab42954d499c241a0d7e.jpg?x-oss-process=image/resize,w_52"
                                                    alt="">
                                            </i>
                                        </span>
                                        <label for="">藏蓝色</label>
                                    </aside>
                                </li>
                                <li>
                                    <aside>
                                        <span class="color_box">
                                            <i class="color_item">
                                                <img src="https://resource.smartisan.com/resource/e647e77234f9ed0fde9dd4084d35ff57.jpg?x-oss-process=image/resize,w_52"
                                                    alt="">
                                            </i>
                                        </span>
                                        <label for="">白色</label>
                                    </aside>
                                </li>
                                <li>
                                    <aside>
                                        <span class="color_box">
                                            <i class="color_item">
                                                <img src="https://resource.smartisan.com/resource/4ef6f3a638cdb3d4546b89bb46a16621.jpg?x-oss-process=image/resize,w_52"
                                                    alt="">
                                            </i>
                                        </span>
                                        <label for="">黑色</label>
                                    </aside>
                                </li>
                            </ul>
                        </div>
                    </section>
                    <section class="item_spec_package">
                        <div class="item_spec">
                            <span class="spec_title">尺码选择</span>
                            <ul class="spec_info">
                                <li class="active">
                                    <aside class="specs_item">
                                        <h1 class="item_name">S</h1>
                                    </aside>
                                </li>
                                <li class="">
                                    <aside class="specs_item">
                                        <h1 class="item_name">M</h1>
                                    </aside>
                                </li>
                                <li class="">
                                    <aside class="specs_item">
                                        <h1 class="item_name">L</h1>
                                    </aside>
                                </li>
                                <li class="">
                                    <aside class="specs_item">
                                        <h1 class="item_name">XL</h1>
                                    </aside>
                                </li>
                                <li class="">
                                    <aside class="specs_item">
                                        <h1 class="item_name">XXL</h1>
                                    </aside>
                                </li>
                                <li class="">
                                    <aside class="specs_item">
                                        <h1 class="item_name">XXXL</h1>
                                    </aside>
                                </li>
                            </ul>
                        </div>
                    </section>
                    <section class="item_count_wrapper">
                        <div class="item_count">
                            <span class="count_title">数量选择</span>
                            <aside class="do_count">
                                <div class="select">
                                    <span class="down"><i></i> -</span>
                                    <span class="num">1</span>
                                    <span class="up"><i></i>+</span>
                                </div>
                            </aside>
                        </div>
                    </section>
                    <section class="sku_custom_tips_wrapper">
                        <div class="sku_custom_tips">
                            <span class="sku_custom_tips_title">服务说明</span>
                            <aside class="sku_custom_tips_text">
                                <p>* 满 99 元包邮</p>
                            </aside>
                        </div>
                    </section>
                </div>
            </div>
            <div class="gray_box1">
                <article class="headline">
                    <h2>产品信息</h2>
                </article>
                <div class="item_info">
                    <img src="https://resource.smartisan.com/resource/9f7b05fceb4bc060d7e37ffa8a477708.jpg" alt="">
                </div>
            </div>
            <div class="product_fix_bar">
                <div class="fix_bar_wrapper">
                    <h1 class="bar_text">您已选择了</h1>
                    <div class="bar_device_info">
                        <h1 class="clearfix">
                            <span class="title">Smartisan T恤 薛定谔 × 4</span>
                        </h1>
                        <h2>男款 | 白色 | L</h2>
                    </div>
                    <div class="bar_btn">加入购物车</div>
                    <div class="white_btn">
                        <a href="">现在购买</a>
                    </div>
                    <div class="discount_price">
                        <div class="bar_price">
                            <i>¥</i><span>298.00</span>
                        </div>
                    </div>
                </div>
            </div>
        </div> -->
    </div>
</body>
<script src="../../static/scripts/require.js" data-main="details.js"></script>

</html>